<template>   
 <div class="wrapper">
   <Header></Header>     
    <tree></tree>

      <!-- 菜单栏 -->
      <div >
          <Tags></Tags>
          <div>
            <!-- mode的意思是当前元素先 -->
            <transition name="move" mode="out-in">
              <keep-alive :include="tagsList">
                <router-view></router-view>
              </keep-alive>
            </transition>
          </div>
      </div>
 </div>
    
</template>

<script>
  import bus from './common/bus'
  import Header from './layout'
  import Tree from './treeMenu'
  import Tags from './common/Tags'
  export default {
    name: 'HomePage',
    components: {
      Header,
      Tree,
      Tags
    },
    data() {
      return {
        tagsList:[]
      }
    },
    created() {
        bus.$on('tags',msg => {
          let arr = [];
          for(let i=0;i<msg.length;i++){
            msg[i].name && arr.push(msg[i].name);
          }
          this.tagsList = arr
        });
    }
  }
</script>


<style>
  /*这个很重要 用于设置页面两边有空隙*/
  /* body {
    padding: 0;
    margin: 0;
  } */

  * {
margin:0;
padding: 0;
}

html,
body,
#app, 
.wrapper{
width: 100%;
height: 100%;
overflow: hidden;
}

</style>